
/* 
  编写主页标签展示卡组件
*/

import React, {useEffect, useState} from 'react';
import {
    Button,
    Input,
    Popconfirm,
    message
} from 'antd';
import rdmRgbColor from '../../../utils/randomcolor';
import {CloseOutlined} from "@ant-design/icons";




import './index.css';
import axios from "axios";
import axiosConfig from "../../../utils/axios.config";
function TagsCard(props) {

  const{
      tags //从服务器获取的标签
  } = props;
  const[input,setInput] = useState('');
  const [tagCards,setTagCards] = useState([])
  function onInputChange(e){
      console.log(e.target.value)
    setInput(e.target.value)
  }

  //删除标签
  function deleteTage(name){

      console.log(name)
      const key = 'deleteTag'
      message.loading({content:'删除中...',key})
      axios({
          url:'/tags/deleteTag',
          baseURL:axiosConfig.baseURL,
          method:'GET',
          params:{
              name
          }
      }).then(response=>{
          const code = response.data.code
          if(code==1){
              for(let i=0;i<tagCards.length;i++){
                  if(tagCards[i].name===name){
                      tagCards.splice(i,1);
                      setTagCards([...tagCards])
                      break
                  }
              }
              message.success({content:'删除成功',key})
          }else{
              message.warn({content:'删除失败:服务器错误',key})
          }
      }).catch((err)=>{
          message.warn({content:'删除失败:本地错误',key})
      })

  }

  function createTag() {
      const key = 'createTag'
      if(input.trim()===''){
          message.warn({content:'输入为空!',key})
          return
      }
      message.loading({content:'添加中...',key})
      axios({
          url:`/tags/addTag`,
          baseURL:axiosConfig.baseURL,
          method:'GET',
          params:{
              name:input
          }
      }).then(response=>{
          const code = response.data.code
          if(code==1){
              tagCards.push({
                  name:input,
                  color:rdmRgbColor()
              })
              setTagCards([...tagCards]);
              setInput('')
              message.success({content:'添加成功',key})
          }else if(code==3) {
              message.warn({content:'添加失败:标签名重复',key})
          }else {
              message.warn({content:'添加失败:服务器错误',key})
          }
      }).catch((err)=>{
          message.warn({content:'添加失败:本地错误',key})
      })

  }

  function processTagCards(){
      const tagCards = []
      tags.forEach(tag=>{
          tagCards.push({
              name:tag,
              color:rdmRgbColor()
          })
      })
      setTagCards(tagCards)
  }

  useEffect(()=>{
      //将获取到的所有标签交给redux托管
      processTagCards()
  },[tags])


  return (
    <div className=' tags-card'>
      <h1>标签</h1>
      <Input.Group compact>
        <Input value={input} onChange={(e)=>{onInputChange(e)}} style={{ width: 'calc(100% - 65px)' }} placeholder='输入新建标签名称'/>
        <Button onClick={()=>{createTag()}} id='add-tags' type="primary" loading={false}>新建</Button>
      </Input.Group>
      <div className="tags-collection">
        {
          tagCards.map((item)=>{
                return (
                    <div key={item.name} className="tag-name" style={{backgroundColor:`${item.color}`}}>
                        <span>{item.name}</span>&nbsp;
                        <Popconfirm title={'确定要删除这个标签吗?'} onConfirm={()=>{deleteTage(item.name)}}>
                            <CloseOutlined />
                        </Popconfirm>
                    </div>
              )
          })
        }
      </div>
    </div>
  )
}


export default TagsCard





